<template>
	<div class="news-container">
		<el-form ref="queryParams" :model="queryParams" :inline="true" class="query-bar">
			<div class="query-row demo-form-inline">
				<div></div>
				<div>
					<el-form-item label="类别">
						<el-select v-model="queryParams.newCategoryId" filterable placeholder="请选择" @change="doQuery">
							<el-option  label="全部" value=""></el-option>
							<el-option v-for="type in newsTypeList" :key="type.id" :label="type.newsCategoryName" :value="type.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="queryParams.status" filterable placeholder="请选择" @change="doQuery">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="(status,index) in statusList" :label="status" :value="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="创建日期">
						<el-date-picker v-model="selectDateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						 end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="dateChange">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="新闻标题">
						<el-input maxlength="30" v-model="queryParams.newsTitle" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="doQuery">查询</el-button>
					</el-form-item>
				</div>
			</div>
			<div class="query-row demo-form-inline">
				<div>
				</div>
				<div>
					<el-form-item>
						<el-button type="primary" @click="addNews">新建新闻</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>
		<div class="lx-table">
			<lx-table ref="myTable" :tableData="newsList" :tableCols="tableCols" isSelection isIndex :currentPage="queryParams.pageNum"
			 :total="queryParams.total" :pageSize="queryParams.pageSize" @sizeChange="sizeChange" @currentChange="currentChange"
			 @select="selectItem">
				 <template slot="bottomOperate">
					 <div>已选 {{selectedIdList.length}}</div>
					 <el-button type="infor" size="small" style="margin-left: 24px;" @click="batchReview(null,1)">批量下架</el-button>
					 <el-button type="infor" size="small" @click="batchReview(1,null)">批量通过</el-button>
					 <el-button type="infor" size="small" @click="batchReview(2,null)">批量不通过</el-button>
				 </template>
			</lx-table>
		</div>
	</div>
</template>

<script>
	import LxTable from "@/components/LxTable.vue"
	import {
		mapActions
	} from "vuex"
	export default {
		components: {
			"lx-table": LxTable
		},
		mounted() {
			let _this = this;
			//初始化窗口
			let params = _this.$store.state.pageParams; //传入到新建题目的查询参数，新建题目不修改直接返回
			if (params && JSON.stringify(params) != "{}") {
				if (params.queryParams) {
					if (params.queryParams.qpName == "NewsList") {
						_this.queryParams = params.queryParams;
					}
					_this.setPageParams(null);
				}
			}
			this.selectNewsCategorys();
			this.getNewsList();
		},
		data() {
			return {
				selectDateRange: null,
				queryParams: {
					status: null,
					newsTitle: "",
					createStartTime: "",
					createEndTime: "",
					newCategoryId:null,
					pageSize: 10,
					pageNum: 1,
					total: 0,
					qpName: "NewsList"
				},
				statusList: ["待审核", "通过", "驳回"],
				tableCols: [{
						label: '主图',
						prop: 'pictureUrl',
						align: "center",
						type: "image",
						imageStyle: "width:90px;height:68px;margin-top:10px"
					}, {
						label: '标题',
						prop: 'newsTitle'
					},
					{
						label: '简介',
						prop: 'newsDescribe'
					},
					{
						label: '发布人',
						prop: 'createrName',
						align: "center"
					},
					{
						label: '发布时间',
						prop: 'createTime',
						align: "center"
					},
					{
						label: '审核状态',
						prop: 'status',
						align: "center",
						formatter: (row) => {
							let status = row.status;
							return this.statusList[row.status];
						}
					},
					{
						label: '是否上架',
						type:'switch',
						prop:'yo',
						change:(row) => this.updateStatusById(row.id,null,1 - row.yn)
					},
					{
						label: '操作',
						type: 'Button',
						btnList: [
							{
								type: 'text',
								label: '编辑',
								handle: (that, row) => this.edit(that, row)
							},
							{
								type: 'text',
								label: '预览',
								handle: (that, row) => this.preview(row.id)
							},
							{
								type: 'text',
								label: '审核通过',
								disabled:(row) => {return row.yn == 1|| row.status > 0},
								handle: (that, row) => this.updateStatusById(row.id,1,null)
							},
							{
								type: 'text',
								label: '审核不通过',
								disabled:(row) => {return row.yn == 1 || row.status > 0},
								handle: (that, row) => this.updateStatusById(row.id,2,null)
							},
						],
						width: 250,
						align: "center"
					},
				],
				newsList: [],
				newsTypeList:[],
				selectedIdList:[]
			}
		},
		computed: {},
		methods: {
			async selectNewsCategorys() {
				let _this = this;
				let ret = await _this.$api.selectNewsCategorys();
				if (ret) {
					_this.newsTypeList = ret;
				}
			},
			currentChange(val) {
				this.queryParams.pageNum = val;
				this.getNewsList();
			},
			sizeChange(val) {
				this.queryParams.pageSize = val;
				this.doQuery();
			},
			doQuery() {
				this.queryParams.pageNum = 1;
				this.getNewsList();
			},
			dateChange(date) {
				if (date && date.length > 0) {
					this.queryParams.createStartTime = date[0];
					this.queryParams.createEndTime = date[1];
				} else {
					this.queryParams.createStartTime = "";
					this.queryParams.createEndTime = "";
				}
				this.doQuery();

			},
			async getNewsList() {
				let _this = this;
				let ret = await _this.$api.selectNewsList(_this.queryParams);
				if (ret) {
					let list = ret.list;
					//添加上架字段
					list.map(el=>{
						el.yo = !Boolean(el.yn)
					})
					_this.newsList = list;
					_this.queryParams.total = ret.total;
				}
			},
			addNews() {
				this.setPageParams({
					queryParams: this.queryParams,
					newsTypeList:this.newsTypeList
				});
				this.$router.push({
					name: "CreateNews"
				});
			},
			async updateStatusById(id,status,yn){
				let _this = this;
				let data = {
					id:id,
					yn:yn,
					status:status
				}
				let ret = await _this.$api.updateStatusById(data);
				if (ret) {
					_this.$message.success("操作成功");
					_this.doQuery();
				}
			},
			edit(t, row) {
				let params = {
					queryParams: this.queryParams,
					newsId: row.id,
					newsTypeList:this.newsTypeList
				}
				this.setPageParams(params);
				this.$router.push({
					name: "CreateNews"
				});
			},
			preview(id){
				let params = {
					queryParams: this.queryParams,
					newsId: id
				}
				this.setPageParams(params);
				this.$router.push({
					name: "PreviewNews"
				});
			},
			batchReview(status,yn) {
				let _this = this;
				let selectedIdList = _this.$refs.myTable.getSelectedIdList();
				if (!selectedIdList || selectedIdList.length == 0) {
					_this.$message.warning("请先选择要审核的数据");
					return;
				}
				let operateName = "";
				if(status == 1){
					operateName = "审核通过"
				}else if(status == 2){
					operateName = "审核不通过通过"
				}else if(yn == 1){
					operateName = "下架"
				}
				_this.$confirm('确定要' + operateName + '选择的数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let ret = await _this.$api.catchUpdateNews({
						ids:selectedIdList,
						yn: yn,
						status: status
					});
					if (ret) {
						_this.$message.success("操作成功");
						_this.getNewsList();
						_this.$refs.myTable.clearSelect();
					}
				}).catch(() => {
				
				})
				
			},
			selectItem(selectedList, selectedIdList){
				this.selectedIdList = selectedIdList;
			},
			...mapActions(["setPageParams"])
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.news-container {
		padding: 32px 24px;
		@include flex-column(flex-start, flex-start);

		
	}
</style>
